<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>省市联动</title>
    <style type="text/css">
        /* 样式设置 */
        *{
           background-color: lightsalmon;
            
        }
        #provinceId{
            background-color: cyan;
            border-radius: 5px;
            border: black solid;
        }
        #cityId{
            background-color: darkturquoise;
            border-radius: 5px;
            border: black solid;
        }
        #countyId{
           background-color: lightcoral;
           border-radius: 5px;
           border: black solid;
        }
    </style>
</head>
<body>
    省份：<select name="" id="provinceId" onchange="changeProvince();">
        <option value="-1">请选择省份：</option>
    </select>
    城市：<select name="" id="cityId" onchange="changCity();">
        <option value="-1">请选择城市</option>
    </select>
    区县：<select name="" id="countyId" onchange="changCounty();">
        <option value="-1">请选择区县</option>
    </select>
    <br/>
    你的选择是：<label for="" id="selectValue"></label>
</body>
 <script type="text/javascript">
     var provice =['湖南省','湖北省','河北省','山西省','陕西省','河南省','浙江省','江苏省','福建省'];
     var citys =[
         ['长沙市'],
         ['武汉市','宜昌市'],
         ['邢台市','保定市'],
         ['太原市','长治市'],
         ['西安市','铜川市'],
         ['郑州市','开封市'],
         ['杭州市','嘉兴市'],
         ['南京市','无锡市','徐州市'],
         ['福州市','厦门市']
     ];
     var countys=[
          [["天心区"]],
          [["江岸区"],["西陵区"]],
          [["信都区"],["莲池区"]],
          [["晋源区"],["潞城区"]],
          [["莲湖区"],["耀州区"]],
          [["金水区"],["鼓楼区"]],
          [["西湖区"],["南湖区"]],
          [["江宁区"],["江阴市"],["云龙区"]],
          [["长乐区"],["集美区"]]
     ];
    
    //  页面初始化添加省份
    onload =function(){
        var proviceObj =document.getElementById('provinceId');
        for(var i=0;i<provice.length;i++){
             proviceObj.innerHTML =proviceObj.innerHTML+` <option value="`+i+`">`+provice[i]+`</option>`;
        }
    }
    //根据省份来添加城市
    function changeProvince(){
        var proviceObj =document.getElementById('provinceId');
        var cityObj =document.getElementById('cityId');
        cityObj.innerHTML =` <option value="-1">请选择城市</option>`;
        if (proviceObj.value ==-1) {
            return;
        }
        var city =citys[proviceObj.value];
        for(var i=0;i<city.length;i++){
                    cityObj.innerHTML +=`<option value="`+i+`">`+city[i]+`</option>`;
        }
    }
     
   //根据城市来添加区县
   function changCity(){
       //获取省份的id
       var proviceObj =document.getElementById('provinceId');
       //获取城市的id
       var cityObj =document.getElementById('cityId');
       //获取区县的id
       var countyObj =document.getElementById('countyId');
       countyObj.innerHTML=`<option value="-1">请选择区县</option>`;
       if (cityObj.value ==-1) {
           return;
       }
     var county =countys[proviceObj.value][cityObj.value];
     for(var i=0;i<county.length;i++){
         countyObj.innerHTML +=`<option value="`+i+`">`+county[i]+`</option>`;
     }
   }



    function changCounty(){
        var proviceObj =document.getElementById('provinceId');
        var cityObj =document.getElementById('cityId');
        var countyObj =document.getElementById('countyId');
        var provinceName =provice[proviceObj.value];
        var cityName =citys[proviceObj.value][cityObj.value];
        var countyName =countys[proviceObj.value][cityObj.value][countyObj.value];
        var selectObj =document.getElementById('selectValue');
        selectObj.innerText =provinceName+"---"+cityName+"---"+countyName;
    }
 </script>
</html>